<template>
  <div class="container">
    <div class="header">
      <h2>小米账号登录</h2>
    </div>
    <div class="content">
      <img src="./img.png" class="logo" alt="">
      <p class="title">欢迎登陆小米有品</p>
      <el-form :rules="loginFormRules" :model="model" ref="model">
        <el-form-item prop="name">
          <el-input autocomplete="off" style="width: 321px;" type="text" placeholder="邮箱/手机号码/ID" v-model.trim="model.name"></el-input>

        </el-form-item>
        <el-form-item prop="pwd" style="margin-top: 20px;">
          <el-input autocomplete="off" type="password" placeholder="请输入密码" v-model="model.pwd"></el-input>

        </el-form-item>
      </el-form>
      <p class="msg"><input autocomplete="off" type="checkbox"> 已阅读并同意小米帐号<span>用户协议</span>和<span>隐私政策</span>
      </p>
      <span class="btn" @click="login">登录
      </span>
      <p class="guide">
        <router-link to="">手机登录</router-link>
        |
        <router-link to="">立即注册</router-link>
        |
        <router-link to="">忘记密码</router-link>
      </p>
    </div>
  </div>
</template>
<script>
import request from "../../utils/request";
import { UserApi } from "@/api";

export default {
  name: "Login",
  data() {
    return {
      userName: sessionStorage.getItem(""),
      model: {
        name: "",
        pwd: ""
      },
      loginFormRules: {
        name: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        pwd: [
          { required: true, message: "请输入登陆密码", trigger: "blur" },
        ]
      },
    }
  },
  methods: {
    async login() {
      try {
        await this.$refs.model.validate();
        await UserApi.login(this.model)
          .then(token => {
            sessionStorage.setItem("token", token)
            sessionStorage.setItem("use", JSON.stringify(this.model))
            this.$router.replace(this.$route.query.target || "/profile")
          })
      } catch (e) {/**/ }

    }
  }
}

</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  height: 22vw;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 

}

.content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #b0b0b0;
  border-bottom: 1px solid #b0b0b0;
  overflow: hidden;
  align-items: center;
}

.logo {
  width: 48px;
  height: 48px;
  margin: 20px auto;
}

.title {
  margin: 10px auto;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.5);
}

.content input {
  margin-top: 20px;
  width: 80%;
  height: 10vw;
  border-radius: 15px;
  background-color: #f0f0f0;
  border: 1px solid #f0f0f0;
  padding: 5px 10px;
}

.msg {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.5);
}

.msg span {
  color: blue;
}

.msg input {
  margin-top: 0;
  width: 15px;
  margin-right: 5px;
}

.btn {
  width: 90%;
  background-color: cornflowerblue;
  border-radius: 25px;
  text-align: center;
  padding: 18px 0;
  font-size: 0.875rem;
  margin-top: 20px;
  color: white;
}


.guide {
  margin-top: 20px;
}

.guide a {
  color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
}
</style>